<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预约系统</title>
  <!-- 引入 Bootstrap 在线CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Microsoft YaHei", sans-serif;
      background-color: #f4f4f4;
      display: flex;
      /* 横向布局：侧边栏 + 主内容 */
      flex-direction: row;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 220px;
      background-color: #2f3b4b;
      color: #fff;
      height: 100vh;
      /* 占满视口高度 */
      padding: 20px 0;
    }

    .sidebar h3 {
      text-align: center;
      margin-bottom: 30px;
      font-size: 1.2rem;
    }

    .sidebar ul {
      list-style: none;
    }

    .sidebar li {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .sidebar li:hover {
      background-color: #3a495a;
    }

    .sidebar li.active {
      background-color: #1f2b38;
    }

    /* 主内容区域容器 */
    .main-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* 顶部导航栏 */
    .topbar {
      background-color: #fff;
      padding: 15px 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .topbar .user-info {
      display: flex;
      align-items: center;
    }

    .topbar .user-info span {
      margin-right: 10px;
    }

    .topbar .logout-btn {
      background-color: #dc3545;
      color: #fff;
      padding: 6px 12px;
      border-radius: 4px;
      text-decoration: none;
      transition: background-color 0.3s;
    }

    .topbar .logout-btn:hover {
      background-color: #c82333;
    }

    /* 内容区（默认隐藏各子页面） */
    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    .page-section {
      display: none;
    }

    .page-section.active {
      display: block;
    }

    /* 查询表单样式 */
    .search-form {
      margin-bottom: 20px;
      background-color: #fff;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .table {
      background-color: #fff;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .table th,
    .table td {
      vertical-align: middle;
    }

    /* 分页组件样式 */
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <!-- 侧边栏 -->
  <aside class="sidebar">
    <h3>预约系统</h3>
    <ul>
      <li class="menu-item" data-target="home">首页</li>
      <li class="menu-item" data-target="appoint-list">预约列表</li>
      <li class="menu-item" data-target="customer-manage">客户管理</li>
      <li class="menu-item" data-target="system-setting">系统设置</li>
    </ul>
  </aside>

  <!-- 主内容（顶部栏 + 内容区） -->
  <div class="main-wrapper">
    <!-- 顶部导航栏 -->
    <header class="topbar">
      <div class="user-info">
        <span>系统管理员：</span>
        <strong>admin</strong>
      </div>
      <a href="#" class="logout-btn">OUT</a>
    </header>

    <!-- 内容区：包含多个子页面 -->
    <main class="main-content">
      <!-- 首页 -->
      <section id="home" class="page-section">
        <h2>首页</h2>
        <p>欢迎使用预约系统，这里可查看系统概览...</p>
      </section>

      <!-- 预约列表 -->
      <section id="appoint-list" class="page-section">
        <h2>预约列表</h2>
        <p>这里展示预约列表相关内容...</p>
      </section>

      <!-- 客户管理（体检客户查询） -->
      <section id="customer-manage" class="page-section">
        <h2 class="mb-3">体检客户查询</h2>
        <!-- 查询表单 -->
        <form class="row g-3 search-form">
          <div class="col-md-2">
            <label for="mobile" class="form-label">手机号</label>
            <input type="text" class="form-control" id="mobile" placeholder="输入搜索的手机号">
          </div>
          <div class="col-md-2">
            <label for="name" class="form-label">姓名</label>
            <input type="text" class="form-control" id="name" placeholder="输入预约体检的客户信息">
          </div>
          <div class="col-md-2">
            <label for="gender" class="form-label">性别</label>
            <select class="form-select" id="gender">
              <option value="">选择性别</option>
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </div>
          <div class="col-md-2">
            <label for="hospitalArea" class="form-label">预约院区</label>
            <select class="form-select" id="hospitalArea">
              <option value="">选择院区地址</option>
              <option value="xikang-hunnan">熙康云医院-浑南院区</option>
            </select>
          </div>
          <div class="col-md-2">
            <label for="packageType" class="form-label">套餐类型</label>
            <select class="form-select" id="packageType">
              <option value="">预约套餐</option>
              <option value="package-c">23东软家属已婚女士套餐C</option>
            </select>
          </div>
          <div class="col-md-2">
            <label for="appointTime" class="form-label">体检时间</label>
            <input type="date" class="form-control" id="appointTime">
          </div>
          <div class="col-md-2">
            <label class="form-label">是否归档</label>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="archived" value="unarchived" checked>
              <label class="form-check-label" for="unarchived">未归档</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="archived" value="archived">
              <label class="form-check-label" for="archived">已归档</label>
            </div>
          </div>
          <div class="col-md-2 align-self-end">
            <button type="button" class="btn btn-primary" onclick="searchAppointments()">查询</button>
          </div>
        </form>

        <!-- 预约列表表格 -->
        <table class="table table-bordered table-striped">
          <thead class="table-dark">
            <tr>
              <th>订单编号</th>
              <th>客户姓名</th>
              <th>客户手机号</th>
              <th>预约院区</th>
              <th>预约套餐</th>
              <th>预约时间</th>
              <th>是否归档</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="tableBody">
            <!-- 数据渲染区域 -->
          </tbody>
        </table>

        <!-- 分页容器 -->
        <div class="pagination-container">
          <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination">
              <!-- 分页按钮动态生成 -->
            </ul>
          </nav>
        </div>
      </section>

      <!-- 系统设置 -->
      <section id="system-setting" class="page-section">
        <h2>系统设置</h2>
        <p>这里可进行系统参数配置...</p>
      </section>
    </main>
  </div>

  <!-- 引入 Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 模拟后端返回的预约数据
    const mockData = [
      {
        orderNo: "2023100256211023",
        customerName: "张一山",
        customerMobile: "13100000000",
        hospitalArea: "熙康云医院-浑南院区",
        packageType: "23东软家属已婚女士套餐C",
        appointTime: "2015-02-12",
        archived: "已归档"
      },
      {
        orderNo: "2023100256211023",
        customerName: "张一山",
        customerMobile: "13100000000",
        hospitalArea: "熙康云医院-浑南院区",
        packageType: "23东软家属已婚女士套餐C",
        appointTime: "2015-02-12",
        archived: "已归档"
      },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
	  {
	    orderNo: "2023100256211023",
	    customerName: "张一山",
	    customerMobile: "13100000000",
	    hospitalArea: "熙康云医院-浑南院区",
	    packageType: "23东软家属已婚女士套餐C",
	    appointTime: "2015-02-12",
	    archived: "已归档"
	  },
      // 可继续添加更多数据...
    ];

    // 分页配置
    const pageSize = 8;
    let currentPage = 1;

    // 侧边栏菜单点击事件
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(item => {
      item.addEventListener('click', function () {
        // 移除所有菜单项的 active 状态
        menuItems.forEach(menu => menu.classList.remove('active'));
        // 当前点击项添加 active
        this.classList.add('active');

        // 获取目标页面 ID 并显示对应区域
        const target = this.getAttribute('data-target');
        const sections = document.querySelectorAll('.page-section');
        sections.forEach(sec => sec.classList.remove('active'));
        document.getElementById(target).classList.add('active');

        // 如果是客户管理页面，初始化表格（模拟查询）
        if (target === 'customer-manage') {
          searchAppointments();
        }
      });
    });

    // 渲染表格数据
    function renderTable(data) {
      const tableBody = document.getElementById("tableBody");
      tableBody.innerHTML = "";

      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      const pageData = data.slice(start, end);

      pageData.forEach(item => {
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td>${item.orderNo}</td>
          <td>${item.customerName}</td>
          <td>${item.customerMobile}</td>
          <td>${item.hospitalArea}</td>
          <td>${item.packageType}</td>
          <td>${item.appointTime}</td>
          <td>${item.archived}</td>
          <td>
            <button class="btn btn-warning btn-sm">取消预约</button>
            <button class="btn btn-info btn-sm">编辑</button>
          </td>
        `;
        tableBody.appendChild(tr);
      });
    }

    // 渲染分页按钮
    function renderPagination(total) {
      const pagination = document.getElementById("pagination");
      pagination.innerHTML = "";

      const totalPages = Math.ceil(total / pageSize);
      for (let i = 1; i <= totalPages; i++) {
        const li = document.createElement("li");
        li.className = "page-item";
        li.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
        if (i === currentPage) {
          li.className = "page-item active";
        }
        pagination.appendChild(li);
      }
    }

    // 切换页码
    function changePage(page) {
      currentPage = page;
      renderTable(mockData);
      renderPagination(mockData.length);
    }

    // 查询逻辑（可扩展条件筛选）
    function searchAppointments() {
      // 这里可获取表单值，对 mockData 做筛选，示例直接渲染全部
      renderTable(mockData);
      renderPagination(mockData.length);
    }

    // 页面加载默认显示首页
    window.onload = () => {
      document.querySelector('.menu-item[data-target="home"]').click();
    };
  </script>
</body>

</html>